<template>
  <FullPageModal
    v-model:visible="modelVisible"
    :title="title"
    :hide-footer="true"
    :body-style="{ padding: 0 }"
    :get-container="getContainer"
    inset-cls=""
    @ok="ok"
    @cancel="cancel"
    @open="open"
  >
    <div ref="content" class="h-full flex flex-col">
      <div v-if="isEnterprise" class="mx-7">
        <a-tabs v-show="!isView" v-model:activeKey="activeTab" class="set-eq-tab">
          <a-tab-pane key="temp" tab="设置点表模板"></a-tab-pane>
          <a-tab-pane key="view" tab="设置视图"></a-tab-pane>
        </a-tabs>
      </div>
      <div class="flex-1 overflow-hidden">
        <SetPointTableView
          v-if="activeTab === 'temp'"
          v-model:visible="modelVisible"
          v-model:active-tab="activeTab"
          :options="props.options"
          :is-enterprise="props.isEnterprise"
          :is-view="isView"
        />
        <SetView
          v-if="activeTab === 'view'"
          v-model:active-tab="activeTab"
          :options="props.options"
          :is-view="isView"
        />
      </div>
    </div>
  </FullPageModal>
</template>
<script lang="ts" setup>
import { ref, shallowRef, watch, computed, nextTick } from "vue";
import FullPageModal from "/@/components/FullPageModal.vue";
import { useSetEquipmentFunction } from "./useSetEquipmentFunction";
import { EquipmentFunctionModalOptions } from "/@/api/aiot/equipment/models";
import SetView from "./SetView.vue";
import SetPointTableView from "./SetPointTableView.vue";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    isEnterprise: boolean;
    isView?: boolean;
    options: EquipmentFunctionModalOptions;
    getContainer?: () => HTMLElement;
  }>(),
  {
    isView: false,
    getContainer: () => document.getElementById("app") || document.body,
  }
);
const activeTab = ref<"temp" | "view" | "">("temp");
const { Api } = useSetEquipmentFunction(props.isEnterprise);
const emits = defineEmits(["create", "update:visible", "successFn"]);
const modelVisible = ref<boolean>(false);

const title = computed(() => {
  return `设置模板（${props.options.equipmentTypeName || "--"}）`;
});
watch(modelVisible, (v) => {
  emits("update:visible", v);
  if (v) {
    activeTab.value = "temp";
  } else {
    activeTab.value = "";
  }
});

/**
 * ok cancel
 */
watch(
  () => props.visible,
  async (v) => {
    modelVisible.value = v;
  }
);
const content = shallowRef<HTMLDivElement>();
async function ok(isContinue) {}
function open(isFirstOpen) {}

function cancel() {
  emits("update:visible", false);
}
</script>
<style lang="less" scoped>
:deep(.mb-2:has(.tab-content)) {
  width: 100%;
}
</style>
<style lang="less">
.set-eq-tab {
  .ant-tabs-nav {
    margin: 0;
  }
}
</style>
